Title: Customize the Sale badge in Storefront

Publish Date: Thu, 31 Mar 2016 07:00:07 +0000

Categories: Uncategorized

Content:

Do you like the sale badge of [ablank href="https://www.woothemes.com/storefront/"]Storefront[/ablank]? I like it! It's simple and effective, but I understand some people might not like it, or maybe they want to move it! Here you will find some basic CSS to customize the sale badge and how to move it in the loop of products.



Open you style.css in wp-content/themes/your-child-theme-name/ and add this code at the end of the file:

.onsale {

}


The class .onsale is used both in the loop and in the single product page, so all the code added there will be applied on all sale badges in your site.

In this tutorial, I'll change only the background, text and border colors, so I can apply to all the badges.

Change the previous code with this:

https://gist.github.com/SiR-DanieL/b407346e3c4212bb93de

In this example, the background color will be white (#FFFFFF) and the text and border colors will be red (#FF0000). Feel free to change the colors with your needs obviously. You can find the hexadecimal codes for any color [ablank href="http://www.colorpicker.com/"]here[/ablank].

Now it's time to move the badge. I think a good position is just below the product image for the products loop.

Add this code to the style.css file, just after the previous code:

https://gist.github.com/SiR-DanieL/8326752688f6c111a498

Note that the top and right position may change based on the size of your product images and the number of columns used for the page.

This will move the badge half hover the image, it will look like this:



Do you want to do more? Read this [ablank href="http://www.w3schools.com/css/"]CSS tutorial[/ablank] and customize further the sale badges on your store!
